<template>
  <view class="code-area" :class="currentTheme">
    <a-nabbar  />
    <view class="box-title u-font-40 pas">{{name}}</view>
    <view class="flex-box">
      <input
          :value="val"
          type="number"
          focus="true"
          maxlength="6"
          class="hide-input"
          @input="getVal"
      />
      <view :class="['item', { active: codeIndex == index }]" v-for="(data,index) in 6" :key="index">
        <view class="line"></view>
        <block ><text class="dot">{{ codeArr[index] ?'.' : ''}}</text></block>
      </view>
    </view>
    <view v-if="type == 3" class="text-tips retrieve">忘记密码？<span @click="retrieve">立即找回</span></view>
  </view>
</template>

<script>
import { md5 } from 'md5js';
import {customRequest,add} from "@/api/crud";
export default {
  data() {
    return {
      codeIndex: 0, //下标
      codeArr: [],
      maxlength:6,
      val:'',//输入框的值
      type:1,
			password:'', //首次输入的密码
			errorNum:3,
			option:{}
    };
  },
  computed:{
    name(){
			const typeTxt = {
				1:'设置',
				2:'确认',
				3:'输入'
			}[this.type]
			return `请${typeTxt}支付密码`
    },
  },
	onShow() {
		const option = uni.getStorageSync('payPassword');
		if(option){
			this.setOption(option)
			uni.removeStorageSync('payPassword')
		}
	},
	onUnload() {
		uni.removeStorageSync('payPassword')
	},
  onLoad(option){
    this.setOption(option)
  },
  methods: {
		setOption(option){
			this.type = option.type
			this.option = option
		},
    //取值
    getVal(e) {
      let { value } = e.detail;
      this.val=value;
      // console.log('验证码:', value);
      let arr = value.split('');
      this.codeIndex = arr.length;
      this.codeArr = arr;
      // console.log(this.codeIndex, this.pwdArr);
      if (this.codeIndex < Number(this.maxlength)) return false;
			if(this.type == 3){
			  //输入完成
			  this.submit()
			}
			//设置密码 成功后需要确认密码
			if(this.type == 1){
				this.password = JSON.parse(JSON.stringify(this.val));
				this.clear()
			  this.type = 2
				return false;
			}
			//确认密码
			if(this.type == 2){
				//连续三次输错确认密码 返回重新设置密码
				if(this.errorNum==0){
					uni.showModal({
						showCancel:false,
						title:'温馨提示',
						content:'三次确认密码输入不一致，请重新设置密码',
						success:()=> {
							this.clear()
							this.type=1;
							this.errorNum = 3
						}
					})
					return false;
				}
				//两次密码需要一致
				if(this.password!=this.val){
					this.clear()
					this.$u.toast('两次密码输入不一致，请重新输入')
					--this.errorNum;
					return false
				}
				//调用接口设置密码
				const password = md5(this.val);
				customRequest({
					password
				},'user','shopApi','setPaymentPsd').then(res=>{
					//设置成功后弹框询问是否继续提现（不需要输入密码）
					uni.showModal({
						confirmText:'提交',
						title:'温馨提示',
						content:'设置成功，请重新提交',
						success:({confirm})=> {
							this.$u.route({
								type:'back'
							})
						}
					})
				})
			}
    },
    //清除验证码或者密码
    clear(){
      this.codeIndex=0;
      this.codeArr=[];
      this.val="";
    },
    // 提交提现
    submit(){
			const password = md5(this.val);
			add({
				money:this.option.price,
				userAccountId:this.option.userAccountId,
				uid:this.loginForm.uid,
				password
			},'userCashOutRecord','shopApi').then(res=>{
				this.$u.route({
				  url:'/pagesA/success/success',
					type:'redirectTo',
				  params:{
				    title:'提交申请提交成功,等待审核',
				    flag:2,
				  },
				})
			}).catch(()=>{
				this.clear();
			})
    },
		//忘记密码
    retrieve(){
      this.$u.route({
        url:'/pagesB/wallet/payRetrieve',
				params:this.option
				
      })
    },
  }
};
</script>

<style lang="scss">
.code-area {
  text-align: center;
  .pas{
    padding-top: 200rpx;
    padding-bottom: 158rpx;
  }
  .retrieve{
    text-align: right;
    margin-right: 71rpx;
    margin-top: 56rpx;
    span{
      color: var(--theme-color);
    }
  }
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    margin-top: 20rpx;
  }
  .item {
    position: relative;
    width: 88rpx;
    height: 88rpx;
    margin-right: 16rpx;
    font-size: 30upx;
    font-weight: bold;
    background: #FEFEFE;
    opacity: 0.92;
    border-radius: 10px;
    color: #333333;
    line-height: 88upx;
    box-sizing: border-box;
  }
  .item:last-child {
    margin-right: 0;
  }
  .active {
    border-color: $primary;
  }
  .active .line {
    display: block;
  }
  .line {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2upx;
    height: 40upx;
    background: $primary;
    animation: twinkling 1s infinite ease;
  }
  .hide-input {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    text-align: left;
    z-index: 9;
    opacity: 1;
  }
  @keyframes twinkling {
    0% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.2;
    }
  }

  .dot{
    font-size: 80upx;
    line-height: 40upx;
  }
}
</style>